<template>
    <div>
        <div class="permissionManagerTool">
            <el-input size="small" placeholder="请输入角色英文名" v-model="role.name">
                <template slot="prepend">ROLE_</template>
            </el-input>
            <el-input size="small" v-model="role.nameZh" placeholder="请输入角色中文名"
                      @keydown.enter.native="doAddRole"></el-input>
            <el-button size="small" type="primary" icon="el-icon-plus" @click="doAddRole">添加角色</el-button>
        </div>
        <div class="permissionManagerMain">
            <el-collapse v-model="activeName" accordion @change="change">
                <el-collapse-item v-for="(r,index) in roles" :title="r.nameZh" :name="r.id" :key="index">
                    <el-card class="box-card">
                        <div slot="header" class="clearfix">
                            <span>可访问资源</span>
                            <el-button style="float: right; padding: 3px 0; color: #ff0000" type="text"
                                       icon="el-icon-delete" @click="doDeleteRole(r)"></el-button>
                        </div>
                        <div>
                            <el-tree
                                show-checkbox
                                :data="allMenus"
                                :props="defaultProps"
                                ref="tree"
                                :key="index"
                                :default-checked-keys="selectMenus"
                                node-key="id"></el-tree>
                            <div style="display: flex; justify-content: flex-end">
                                <el-button size="mini" @click="cancelUpdate">取消修改</el-button>
                                <el-button size="mini" type="primary" @click="doUpdate(r.id, index)">确认修改</el-button>
                            </div>
                        </div>
                    </el-card>
                </el-collapse-item>
            </el-collapse>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'PermissionManager',
        data () {
            return {
                role: {
                    name: '',
                    nameZh: ''
                },
                activeName: '-1',
                roles: [],

                allMenus: [],
                selectMenus: [],
                defaultProps: {
                    //组件与数据字段匹配， 别名
                    children: 'children',
                    label: 'name'
                }
            }
        },
        mounted () {
            this.initRoles()

        },
        methods: {
            initRoles () {
                this.getRequest('/system/basic/permission').then(resp => {
                    this.roles = resp
                })
            },
            initAllMenus () {
                this.getRequest('/system/basic/permission/menus').then(resp => {
                    this.allMenus = resp
                })
            },
            change (rid) {
                if (rid) {   //收起来不触发
                    this.initAllMenus()  //必须在change，在mounted挂载后不渲染，以后根据rid获得单个menus应该更好
                    this.initSelectMenus(rid)  //两者都在同一个组件上应该一起更新
                }

            },
            initSelectMenus (rid) {
                this.getRequest('/system/basic/permission/selectMenus/' + rid).then(resp => {
                    this.selectMenus = resp
                })
            },
            cancelUpdate () {
                this.activeName = -1
            },
            doUpdate (rid, index) {
                let tree = this.$refs.tree[index]
                let selectKeys = tree.getCheckedKeys(true)//加true只获取叶子节点id，中间节点不获取
                let url = '/system/basic/permission?rid=' + rid
                selectKeys.forEach(key => {
                    url += '&mids=' + key
                })
                this.putRequest(url).then(resp => {
                    this.activeName = -1//全部关掉
                })
            },
            doAddRole () {
                if (this.role.name && this.role.nameZh) {
                    this.postRequest('/system/basic/permission/role', this.role).then(resp => {
                        this.initRoles()
                        this.role.name = ''
                        this.role.nameZh = ''
                    })
                } else {
                    this.$message.error('字段不能为空')
                }
            },
            doDeleteRole (role) {

                this.$confirm('此操作将永久删除' + role.nameZh + '角色, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.deleteRequest('/system/basic/permission/role/' + role.id).then(resp => {
                        this.initRoles()
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    })
                })
            }
        }
    }
</script>

<style scoped>
    .permissionManagerTool {
        display: flex;
        justify-content: flex-start;
    }

    .permissionManagerTool .el-input {
        width: 300px;
        margin-right: 6px;
    }

    .permissionManagerMain {
        margin-top: 10px;
        width: 700px;
    }
</style>
